import React from 'react';
import Api from 'Utils/api';
import { Button, Table, Modal, message } from 'antd';
import AddModal from './addModal';
import UpdateModal from './updateModal';
import '../organizeRule.scss';
import CommomBorder from './../../DispatchPage/Components/CommonBorder';

const PAGE_SIZE = 9;
const confirm = Modal.confirm;
class OrganizeRulePage extends React.PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      selectTab: 1,
      totalCount: 0,
      list: [],
      listPage: 1,
    };
    this.init = ::this.init;
    this.time = ::this.time;
    this.handleUpdate = ::this.handleUpdate;
  }
  componentDidMount() {
    this.init();
  }
  init() {
    const api = new Api({
      method: 'GET',
      path: '/warning/org',
      query: {
        limit: PAGE_SIZE,
        offset: (this.state.listPage - 1) * PAGE_SIZE,
      },
      success: (json) => {
        this.setState({
          totalCount: json.total_count,
          list: json.data_list,
        });
      },
    });
    api.run();
  }
  getAlertRule(id) {
    if (id === 2) {
      return {
        color: '#FF5400',
        label: '警示'
      };
    }
    if (id === 1) {
      return {
        color: '#FFE218',
        label: '预警'
      };
    }
    if (id === 3) {
      return {
        color: '#FF0000',
        label: '告警'
      };
    }
    return {
      color: '#FF5400',
      label: '警示'
    };
  }
  time(record) {
    switch (record.time) {
      case '1m': return '一个月';
      case '3m': return '三个月';
      case '1y': return '一年';
      default: return '无效时间';
    }
  }
  generatorColumns() {
    return [
      {
        title: '企业类别',
        dataIndex: 'category',
        render: text => (
          <span>{text}</span>
        )
      },
      {
        title: '时间范围',
        dataIndex: 'time',
        render: (text, record) => {
          return <span>{this.time(record)}</span>;
        }
      },
      {
        title: '检查次数',
        dataIndex: 'check_times',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '企业预警数',
        dataIndex: 'warn_times',
        render: text => (
          <span >{text}</span >
        )
      },
      {
        title: '预警等级',
        dataIndex: 'warn_level',
        render: (text) => {
          const item = this.getAlertRule(text);
          return <span style={{ color: item.color, textAlign: 'center' }}>{item.label}</span>;
        },
      },
      {
        title: '操作',
        dataIndex: 'operate',
        render: (text, record) => (
          <span>
            <span className="operate" style={{ color: '#F6A87F' }} onClick={this.handleUpdate.bind(this, record)} >修改</span>
            <span className="operate" style={{ color: '#F45757' }} onClick={this.handleDelete.bind(this, record)} >删除</span>
          </span>
        )
      },
    ];
  }
  handleDelete(record) {
    const self = this;
    confirm({
      title: '删除',
      content: '确定删除该机构预警模型配置?',
      onOk() {
        const api = new Api({
          method: 'DELETE',
          path: `/warning/org/${record.id}`,
          success: () => {
            message.success('删除成功');
            self.init();
          },
          error: (err) => {
            message.error(err);
          }
        });
        api.run();
      },
      onCancel() {
      },
    });
  }
  onListPageChange(page) {
    this.setState({ listPage: page }, () => {
      this.init();
    });
  }
  handleUpdate(record) {
    this.UpdateModal.show(record);
  }
  handleAdd() {
    this.AddModal.show();
  }
  render() {
    const columns = this.generatorColumns();
    const { list } = this.state;
    return (
      <div>
        <CommomBorder
          btn={<Button className="search-btn" onClick={this.handleAdd.bind(this)}>
            <img src="images/page/icon_add.png" alt="" />
            新增
          </Button>}
          content={
            <Table
              rowKey={record => record.id}
              columns={columns}
              bordered
              dataSource={list}
              pagination={{
                pageSize: PAGE_SIZE,
                total: this.state.totalCount,
                current: this.state.listPage,
                onChange: this.onListPageChange.bind(this)
              }}
            />
          }
        />
        <AddModal
          ref={(ref) => {
            this.AddModal = ref;
          }}
          init={this.init}
        />
        <UpdateModal
          ref={(ref) => {
            this.UpdateModal = ref;
          }}
          init={this.init}
        />
      </div>
    );
  }
}

export default OrganizeRulePage;
